import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, TextInput} from 'react-native';
import {windowWidth, windowHeight, getWidth} from '../../utils/index';
import Touchable from '../../components/Touchable';
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';
import Toast from 'react-native-root-toast';
import {IUserInfo} from '@/models/user';
import AsyncStorage from '@react-native-async-storage/async-storage';

const mapStateToProps = ({users, loading}: RootState) => {
  return {
    // 在触发getUserInfo方法时加上加载效果
    loading: loading.effects['users/addAddress'],
  };
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;
interface IFormData {
  user_id: '';
  Consigner_name: any;
  consigner_phone: any;
  address_message: any;
}
interface IProps extends ModelState {
  navigation: {goBack: any; navigate: any};
  route: any;
}
const AddAddress = (props: IProps) => {
  const {route, dispatch, navigation} = props;
  const [formData, setFormData] = useState<IFormData>({
    user_id: route.params.user_id,
    Consigner_name: null,
    consigner_phone: null,
    address_message: null,
  });

  const onChangeText = (text: string, name: string) => {
    console.log('name1111111111111', name, 'text111111111111111111', text);
    let obj = {[name]: text};
    let newFormData = Object.assign(formData, obj);
    console.log('newFormData', newFormData);
    setFormData(newFormData);
  };
  const handleAddAddress = () => {
    console.log('handleAddAddress');
    console.log('打印一下要发送的formData', formData);
    if (!formData.Consigner_name) {
      Toast.show('请输入收货人名称', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
    if (!formData.consigner_phone) {
      Toast.show('请输入收货人手机号', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
    if (!formData.address_message) {
      Toast.show('请输入收货地址', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
    let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if(!reg.test(formData.consigner_phone)) {
      Toast.show('手机号格式不正确，请重新输入', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
    dispatch({
      type: 'users/addAddress',
      payload: {
        formData: formData,
        callback: () => {
          // 更新本地的currentUserInfo
          dispatch({
            type: 'users/getCurrentUser',
            payload: {
              user_id: route.params.user_id,
              callback: (data: IUserInfo[]) => {
                console.log('收货地址页面拿到了data', data);
                data[0] &&
                  AsyncStorage.setItem(
                    'currentUserInfo',
                    JSON.stringify(data[0]),
                  );
                Toast.show('新增收货地址成功', {
                  position: Toast.positions.CENTER,
                  duration: Toast.durations.LONG,
                  shadow: true,
                  animation: true,
                });
                navigation.goBack();
              },
            },
          });
        },
      },
    });
  };
  return (
    <View style={styles.addaddRess}>
      <View style={styles.mainBox}>
        <TextInput
          placeholder="请输入收货人姓名"
          style={[styles.inputBox, styles.inputBoxTop]}
          onChangeText={text =>
            onChangeText(text, 'Consigner_name')
          }></TextInput>
        <TextInput
          placeholder="请输入收货人手机号"
          style={styles.inputBox}
          onChangeText={text =>
            onChangeText(text, 'consigner_phone')
          }></TextInput>
        <TextInput
          placeholder="请输入收货地址"
          style={styles.inputBox}
          onChangeText={text =>
            onChangeText(text, 'address_message')
          }></TextInput>
        <Touchable onPress={handleAddAddress}>
          <Text style={styles.loginBtn}>新增地址</Text>
        </Touchable>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  addaddRess: {
    padding: 10,
    backgroundColor: '#fff',
    width: windowWidth,
    height: windowHeight,
  },
  mainBox: {
    marginTop: 70,
    display: 'flex',
    alignItems: 'center',
  },
  bigTitle: {
    fontSize: 70,
    fontWeight: '700',
    color: '#A75E5E',
  },
  title: {
    fontSize: 16,
    fontWeight: '700',
    fontFamily: 'Edwardian Script ITC',
    color: '#A75E5E',
  },
  inputBox: {
    width: getWidth(80),
    height: 40,
    borderBottomColor: '#A75E5E',
    borderBottomWidth: 1,
  },
  inputBoxTop: {
    marginTop: 20,
  },
  loginBtn: {
    width: getWidth(50),
    height: 35,
    color: '#fff',
    textAlign: 'center',
    backgroundColor: '#A75E5E',
    marginVertical: 35,
    borderRadius: 35,
    lineHeight: 35,
  },
});
export default connector(AddAddress);
